@import 'antd/dist/reset.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-size: 14px;
  @apply bg-white text-gray-900;
}

.footer {
  @apply text-center self-center text-sm flex justify-between px-4 text-gray-600;

  .links {
    @apply space-x-1;

    .ricon {
      @apply text-xl text-gray-500 hover:text-gray-600;
    }
  }
}

.ricon {
  font-size: 1em;
}

.ant-btn {
  @apply items-center;

  .ricon {
    all: unset;
  }

  .ricon + span {
    margin-left: 4px;
  }
}

:root {
  --max-content-height: calc(100vh - 75px);
}

.log-wrapper {
  @apply relative w-full h-[500px];
  @screen lg {
    height: auto;
  }

  .react-lazylog-searchbar {
    @apply rounded-t border-b  border-b-gray-900 shadow-md;
  }
  .ReactVirtualized__List {
    @apply rounded-b;
  }
}

.model-list-wrapper {
  @apply rounded w-full md:w-[450px] lg:w-[600px] border border-gray-200;

  .model-list-header {
    @apply text-lg text-gray-600 p-2 px-4 bg-gray-100 border-b border-gray-200;
  }

  .model-list-scrollview {
    @apply overflow-y-scroll h-[300px];
    @screen lg {
      height: calc(var(--max-content-height) - 50px);
      min-height: 250px;
    }
  }

  .model-list-item {
    @apply min-h-[60px] flex items-center justify-between py-2 px-4 hover:bg-gray-50 border-b border-b-gray-200;
  }
}

.file-browser-container {
  height: calc(var(--max-content-height) - 50px);
  min-height: 250px;
  @apply rounded overflow-y-scroll border border-gray-200 shadow-sm divide-y divide-gray-100 p-2;
}
